<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>朱光斌-前端开发工程师-两年</title>
    <link rel="stylesheet" href="css/swiper-3.3.1.min.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <!-- 第一屏 -->
            <section class="swiper-slide swiper-slide-1">
                <!-- 音乐按钮 -->
                <div class="music"></div>
                <!-- 左右射灯 -->
                <div class="spotlight-left"><img src="images/z.png"></div>
                <div class="spotlight-right"><img src="images/y.png"></div>
                <!-- 下箭头 -->
                <div class="arrows"><img src="images/pgdn.png"></div>
                <!-- 风车 -->
                <img class="windmill-1" src="images/fs1.png">
                <img class="windmill-2" src="images/fs2.png">

                <!-- 第一屏整体布局 begin -->
                <div class="no-1">
                    <!-- 第一屏整体布局 end -->
                    <!-- 整体动画-1 begin -->
                    <div class="entirety-1">
                        <!-- 中心大风车 -->
                        <img class="centre-windmill" src="images/fs1.png">
                        <!-- 扇形 -->
                        <img class="secto" src="images/secto.png">
                        <!-- 自己的照片 -->
                        <img class="self" src="images/046.jpg">
                        <!-- 柱子 -->
                        <img class="side" src="images/side.png">
                        <!-- 瞄准镜 -->
                        <img class="sighting" src="images/sighting.png">
                        <!-- 介绍 -->
                        <div class="site">
                            <p>安徽</p>
                            <img src="images/site.png">
                        </div>
                        <div class="age">
                            <p>28岁</p>
                            <img src="images/age.png">
                        </div>
                        <div class="rank">
                            <p>大专</p>
                            <img src="images/rank.png">
                        </div>
                    </div>
                    <!-- 整体动画-1 end -->

                    <!-- 文字介绍模块 begin -->
                    <div class="synopsis">
                        <p class="monicker">朱光斌</p>
                        <p class="major">前端开发 - 两年</p>
                        <p class="phone">TEL：17012343553</p>
                    </div>
                    <!-- 文字介绍模块 end -->

                    <!-- 奔跑模块 begin -->
                    <div class="rush">
                        <div class="rush-1">
                            <img class="bp" src="images/bp.png">
                            <img class="yf" src="images/yf.png">
                        </div>
                        <img class="lg" src="images/lg.png">
                        <p>2016 - ZHUGUANGBIN</p>
                    </div>
                    <!-- 奔跑模块 end -->
                </div>
            </section>

            <!-- 第二屏 -->
            <section class="swiper-slide swiper-slide-2">
                <!-- 左右射灯 -->
                <div class="spotlight-left"><img src="images/z.png"></div>
                <div class="spotlight-right"><img src="images/y.png"></div>
                <!-- 下箭头 -->
                <div class="arrows"><img src="images/pgdn.png"></div>
                <!-- 风车 -->
                <img class="windmill-1" src="images/fs1.png">
                <img class="windmill-2" src="images/fs2.png">
                <!-- 标题 -->
                <img class="zgb" src="images/zgb.png">

                <!-- 第一动画 -->
                <div class="no-1">
                    <img class="pic13" src="images/pic13.png">
                    <img class="scrn1" src="images/scrn1.png">
                    <img class="ECG ECG-1" src="images/ECG.png">
                    <div class="ball">
                        <img src="images/trolley.png">
                        <img src="images/trolley.png">
                        <img src="images/trolley.png">
                    </div>
                </div>
                <!-- 第二动画 -->
                <div class="no-2">
                    <div class="ball">
                        <img src="images/trolley.png">
                        <img src="images/trolley.png">
                        <img src="images/trolley.png">
                    </div>
                    <img class="pic15" src="images/pic15.png">
                    <img class="scrn2" src="images/scrn2.png">
                    <video>
                        <source src="video/fun.mp4">
                    </video>
                    <img class="play" src="images/play.png">
                </div>
            </section>

            <!-- 第三屏 -->
            <section class="swiper-slide swiper-slide-3">
                <!-- 左右射灯 -->
                <div class="spotlight-left"><img src="images/z.png"></div>
                <div class="spotlight-right"><img src="images/y.png"></div>
                <!-- 下箭头 -->
                <div class="arrows"><img src="images/pgdn.png"></div>
                <!-- 风车 -->
                <img class="windmill-1" src="images/fs1.png">
                <img class="windmill-2" src="images/fs2.png">

                <!-- web-skill -->
                <div class="pic17">
                    <img src="images/pic17.png">
                </div>

                <!-- 技能 begin -->
                <div class="skill">
                    <img class="pic18" src="images/pic18.png">
                </div>
                <!-- jquery -->
                <div class="jquery">
                    <img class="pic19" src="images/pic19.fw.png">
                    <img class="pic20" src="images/pic20.fw.png">
                    <img class="pic21" src="images/pic21.fw.png">
                </div>
                <!-- javascript -->
                <div class="javascript">
                    <img class="pic22" src="images/pic22.fw.png">
                    <img class="pic23" src="images/pic23.fw.png">
                    <img class="pic24" src="images/pic24.fw.png">
                </div>
                <!-- html+css -->
                <div class="htmlCss">
                    <img class="pic25" src="images/pic25.fw.png">
                    <img class="pic26" src="images/pic26.fw.png">
                    <img class="pic27" src="images/pic27.fw.png">
                </div>
                <!-- bootstrap -->
                <div class="bootstrap">
                    <img class="pic28" src="images/pic28.fw.png">
                    <img class="pic29" src="images/pic29.fw.png">
                    <img class="pic30" src="images/pic30.fw.png">
                </div>
                <!-- ajax -->
                <div class="ajax">
                    <img class="pic31" src="images/pic31.fw.png">
                    <img class="pic32" src="images/pic32.fw.png">
                    <img class="pic36" src="images/pic36.fw.png">
                </div>
                <!-- angularjs -->
                <div class="angularjs">
                    <img class="pic33" src="images/pic33.fw.png">
                    <img class="pic34" src="images/pic34.fw.png">
                    <img class="pic35" src="images/pic35.fw.png">
                </div>
                <!-- 技能 end -->
            </section>

            <!-- 第四屏 -->
            <div class="swiper-slide swiper-slide-4">
                <!-- 左右射灯 -->
                <div class="spotlight-left"><img src="images/z.png"></div>
                <div class="spotlight-right"><img src="images/y.png"></div>
                <!-- 下箭头 -->
                <img class="arrows" src="images/pgdn.png">
                <!-- 风车 -->
                <img class="windmill-1" src="images/fs1.png">
                <img class="windmill-2" src="images/fs2.png">
            </div>
        </div>

        <!-- 分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 音乐 -->
        <audio autoplay="autoplay" loop="loop">
            <source src="music/华语群星%20-%20奔跑%20(Live).mp3">
            <source src="music/华语群星%20-%20奔跑%20(Live).ogg">
            <source src="music/华语群星%20-%20奔跑%20(Live).wav">
        </audio>
    </div>
    <script src="js/zepto.min.js"></script>
    <script src="js/swiper-3.3.1.min.js"></script>
    <script src="js/index.js"></script>
</body>
</html>